<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header jcsb" @click="back">
        <ArrowLeftBold style="width: 1em; height: 1em" />
        <span>机构管理详情</span>
      </div>
    </template>
    <div class="content">
      <el-select
        v-model="tableConfig.orderSoure"
        class="m-2 tableWidth"
        placeholder="订单来源"
        @change="selectChange"
        clearable
      >
        <el-option
          v-for="item in orderSoureList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-model="tableConfig.orderType"
        class="m-2 ml10 tableWidth"
        placeholder="订单类型"
        clearable
      >
        <el-option
          v-for="item in orderTypeList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-model="tableConfig.moneyType"
        class="m-2 ml10 tableWidth"
        placeholder="钱包类型"
        clearable
      >
        <el-option
          v-for="item in walletList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-model="tableConfig.purseType"
        class="m-2 ml10 tableWidth"
        placeholder="交易类型"
        clearable
      >
        <el-option
          v-for="item in dealType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </el-select>
      <el-date-picker
        @change="selectChange"
        v-model="tableConfig.time"
        type="daterange"
        class="ml10"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :popper-options="{ placement: 'bottom-end' }"
      />
      <el-input
        @change="selectChange"
        v-model="tableConfig.keywords"
        class="w-50 m-2 ml10"
        placeholder="请输入手机号/订单内容"
        :prefix-icon="Search"
        clearable
        @clear="tableConfig.keywords = ''"
      />
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="tableHead"
        height="500px"
      >
        <el-table-column prop="fromSource" label="订单来源" />
        <el-table-column prop="financialType" label="订单类型" />
        <el-table-column prop="userMobile" label="用户信息" />

        <el-table-column label="设备" prop="device" width="120">
          <template #default="scope">
            <span>{{ scope.row.device ?? '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="serviceName" label="订单内容" /> -->
        <el-table-column label="订单内容" prop="serviceName">
          <template #default="scope">
            <span v-html="scope.row.serviceName"></span>
          </template>
        </el-table-column>
        <el-table-column label="钱包类型" prop="device" width="120">
          <template #default="scope">
            <span>{{ scope.row.moneyType ?? '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易类型" prop="purseType" width="120">
          <template #default="scope">
            <span>{{ scope.row.purseType == 1 ? '支出' : '收入' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subLedger" label="子分类账" />
        <el-table-column label="金额" prop="amount" width="120">
          <template #default="scope">
            <span v-if="scope.row.purseType == 1">
              <!-- <span>{{ scope.row.purseType == 1 ? '-' : '+' }}</span> -->
              {{ scope.row.amount > 0 ? '-' : '' }}{{ scope.row.amount }}</span
            >
            <span v-else-if="scope.row.purseType == 2"
              >{{ scope.row.amount > 0 ? '+' : '' }}{{ scope.row.amount }}</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="creationTime" label="创建时间" sortable>
          <template #header="scope">
            <span class="creationTime">
              {{ scope.column.label }}

              <SortDown
                :class="current == 1 ? 'active' : ''"
                @click="sortBtn(1)"
                class="SortDown"
              />
              <SortUp
                :class="current == 2 ? 'active' : ''"
                @click="sortBtn(2)"
                class="SortUp"
              />
            </span>
          </template>
        </el-table-column>
      </el-table>

      <div class="right">
        <pagintion
          :tableConfig="tableConfig"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        />
      </div>
    </div>
  </el-card>
</template>
<script setup>
import pagintion from '@/components/Pagintions/pagintion.vue';
import { getMoneyLogList, getMoneyType } from '@/api/finance/finance';
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const current = ref(null);
const tableConfig = ref({
  storeId: '',
  groupId: 0,
  page: 1,
  pageSize: 10,
  walletType: 1,
  orderSoure: '',
  orderType: '',
  moneyType: '',
  purseType: '',
  time: [],
  keywords: '',
  page: 1,
  pageSize: 10,
  timeStatr: '',
  timeEnd: '',
  sort: 'desc',
  total: 0,
});
//订单来源
const orderSoureList = ref([]);
//订单类型
const orderTypeList = ref([]);
//钱包类型
const walletList = ref([]);
// 交易类型
const dealType = ref([
  {
    value: 2,
    label: '收入',
  },
  {
    value: 1,
    label: '支出',
  },
]);
const arr = ref([]);
const tableData = ref([]);

const sizeChange = (val) => {
  tableConfig.value.pageSize = val;
  tableDataList();
};
const currentChange = (val) => {
  tableConfig.value.page = val;
  tableDataList();
};
// 时间转换年月日
const formatDate = (date) => {
  const year = date.getFullYear();
  // getMonth 返回的月份是从 0 开始的，因此需要加 1
  const month = date.getMonth() + 1;
  const day = date.getDate();

  // 使用 ES6 模板字符串进行格式化
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
};
const sortBtn = (type) => {
  current.value = type;
  current.value == 1
    ? (tableConfig.value.sort = 'asc')
    : (tableConfig.value.sort = 'desc');
  tableDataList();
};
// 筛选
const selectChange = () => {
  arr.value = [];
  var startDate;
  var endDate;
  // 判断form表单是否有值
  if (!!tableConfig.value.time && !!tableConfig.value.time) {
    if (tableConfig.value.time[0] && tableConfig.value.time[1]) {
      startDate = formatDate(new Date(tableConfig.value.time[0]));
      endDate = formatDate(new Date(tableConfig.value.time[1]));
    } else {
      startDate = '';
      endDate = '';
    }
  }

  tableConfig.value.timeStatr = startDate ? startDate : '';
  tableConfig.value.timeEnd = endDate ? endDate : '';
  arr.value.push(startDate, endDate);

  tableConfig.value.time = arr.value;
  tableDataList();
};
//获取钱包筛选接口
const SelectFilter = () => {
  getMoneyType().then((res) => {
    //订单来源
    orderSoureList.value = res.data.orderSoure;
    //订单类型
    orderTypeList.value = res.data.orderType;
    //钱包类型
    walletList.value = res.data.wallet;
  });
};
const back = () => {
  router.push({ path: 'management' });
};
const tableDataList = async () => {
  delete tableConfig.value.total;
  loading.value = true;
  const { data } = await getMoneyLogList(tableConfig.value);
  tableConfig.value.total = data.total;
  tableData.value = data.data;
  loading.value = false;
};
onMounted(() => {
  SelectFilter();
  const { groupId, storeId, type } = route.query;
  if (type == 'storeId') {
    tableConfig.value.storeId = storeId;
  } else {
    tableConfig.value.groupId = groupId;
    tableConfig.value.storeId = storeId;
  }
  tableDataList();
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
